<template>
  <page-container>
    <a-card :bordered="false" :bodyStyle="{ paddingBottom: '0' }">
      <div class="ant-descriptions-title">收益统计</div>
<!--      <a-form layout="inline">-->
<!--        <a-form-item label="时间范围">-->
<!--          <a-range-picker v-model="dateRange">-->
<!--            <a-icon slot="suffixIcon" type="calendar" />-->
<!--          </a-range-picker>-->
<!--        </a-form-item>-->
<!--        <a-form-item>-->
<!--          <a-button type="primary" icon="search" @click="getProviderWalletStat">查询</a-button>-->
<!--        </a-form-item>-->
<!--      </a-form>-->
      <a-spin :spinning="loadingStat">
        <stat-info :wallet="wallet" />
      </a-spin>
    </a-card>
    <a-card :bordered="false" style="margin-top:24px">
      <div class="ant-descriptions-title">乐管家列表</div>
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="24">

            <a-col :md="3" :sm="24">
              <a-form-item label="地区">
                <a-select v-model="queryParam.provinceid" placeholder="省" @change="onProvinceChange($event, 'form')">
                  <a-select-option :value="item.provinceid" v-for="item in provinceList" :key="item.provinceid">{{
                      item.province
                    }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="2" :sm="24">
              <a-form-item>
                <a-select v-model="queryParam.cityid" placeholder="市" @change="onCityChange($event, 'form')">
                  <a-select-option :value="item.cityid" v-for="item in cityList" :key="item.cityid">{{
                      item.city
                    }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="2" :sm="24">
              <a-form-item>
                <a-select v-model="queryParam.area" placeholder="区" @change="onAreaChange">
                  <a-select-option :value="item.area" v-for="item in areaList" :key="item.area">{{
                      item.area
                    }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="3" :sm="24">
              <a-form-item>
                <a-select v-model="queryParam.store_id" placeholder="门店">
                  <a-select-option :value="item.id" v-for="item in storeList" :key="item.id">{{
                      item.name
                    }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="24">
              <a-form-item>
                <a-input placeholder="请输入姓名或手机号" v-model="queryParam.search" />
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="24">
              <span class="table-page-search-submitButtons">
                <a-button type="primary" @click="handleSearch(true)" icon="search" style='margin-right: 8px'>查询</a-button>
                <a-button type="primary" @click="handleReset" icon="search">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
        <s-table
          ref="table"
          size="default"
          rowKey="id"
          :columns="columns"
          :data="loadData"
          :pagination="pagination"
        >
          <template slot="head_img" slot-scope="text">
            <a-avatar shape="square" :size="32" icon="user" :src="text" />
          </template>
          <template slot="actions" slot-scope="text, record">
            <a @click="handleDetail(record)">详情</a>
          </template>
        </s-table>
      </div>
    </a-card>
    <StewardWalletShowTable />
  </page-container>
</template>

<script>
import { stewardWalletStatList, stewardWalletStat } from '@/api/stat'
import { areaLink, cityLink, provinceLink,stores } from '@/api/notControl'
import formTableMixin from '@/mixins/formTableMixin'
import statInfo from '@/components/stat-info/stat-info'
import StewardWalletShowTable from './modules/StewardWalletShowTable.vue'
import pick from 'lodash.pick'

const columns = [
  {
    title: '头像',
    dataIndex: 'head_img',
    scopedSlots: { customRender: 'head_img' }
  },
  {
    title: '名称',
    dataIndex: 'name'
  },
  {
    title: '电话',
    dataIndex: 'mobile'
  },
  {
    title: '所属门店',
    dataIndex: 'store_name'
  },
  {
    title: '总金额',
    dataIndex: 'all_money',
    customRender (text) {
      return '￥' + text
    }
  },
  {
    title: '充值金额',
    dataIndex: 'topup_money',
    customRender (text) {
      return '￥' + text
    }
  },
  {
    title: '已用金额',
    dataIndex: 'take_money',
    customRender (text) {
      return '￥' + text
    }
  },
  {
    title: '可用金额',
    dataIndex: 'usable_money',
    customRender (text) {
      return '￥' + text
    }
  },
  // {
  //   title: '总积分',
  //   dataIndex: 'cnt.all_integral'
  // },
  // {
  //   title: '已用积分',
  //   dataIndex: 'cnt.take_integral'
  // },
  // {
  //   title: '可用积分',
  //   dataIndex: 'cnt.usable_integral'
  // },
  {
    title: '操作',
    dataIndex: 'actions',
    width: '150px',
    scopedSlots: { customRender: 'actions' }
  }
]

export default {
  name: 'ProviderWallet',
  mixins: [formTableMixin],
  components: {
    statInfo,
    StewardWalletShowTable
  },
  data () {
    this.columns = columns
    this.listAction = stewardWalletStatList
    return {
      loadingStat: false,
      wallet: {},
      cityList: [],
      provinceList: [],
      areaList: [],
      storeList:[]
    }
  },
  created () {
    provinceLink().then(res => {
      this.provinceList = res.data
    })
    this.getProviderWalletStat()
  },
  methods: {
    getStores(){
      const params = pick(this.queryParam,['province','city','area'])
      stores(params).then(res=>{
        this.storeList = res.data.clothes
      })
    },
    onProvinceChange (provinceid, formId) {
      return cityLink({ provinceid }).then(res => {
        this.cityList = res.data
        this.queryParam.cityid =  undefined
        this.queryParam.province = this.provinceList.find(item=>item.provinceid === provinceid).province
      })
    },
    onCityChange (cityid, formId) {
      return areaLink({ cityid }).then(res => {
        this.areaList = res.data
        this.queryParam.areaid =  undefined
        this.queryParam.city = this.cityList.find(item=>item.cityid === cityid).city
      })
    },
    onAreaChange(){
      this.getStores()
    },
    handleDetail (record) {
      this.$router.push({
        name: 'stewardWalletDetail',
        query: {
          user_id: record.user_id,
          name: record.name,
        }
      })
    },
    getProviderWalletStat () {
      this.loadingStat = true
      stewardWalletStat()
        .then(res => {
          this.wallet = Object.assign({ sum_price: res.data.all_money }, res.data)
        })
        .finally(() => (this.loadingStat = false))
    }
  }
}
</script>
